import { UploadOutlined } from "@ant-design/icons";
import ProForm, { DrawerForm, ProFormCheckbox, ProFormDatePicker, ProFormDateTimePicker, ProFormDigit, ProFormGroup, ProFormSelect, ProFormText, ProFormTextArea } from "@ant-design/pro-form"
import { PageContainer } from "@ant-design/pro-layout"
import ProTable, { ProColumns } from "@ant-design/pro-table"
import { Button, Upload } from "antd";
import { useState } from "react";

export default () => {
  const [activeKey,setActiveKey] = useState("tab1");
  const [showDetail,setShowDetail] = useState(false);
  const [fileList,setFileList] =useState<any>([]);
  const [mType,setMType] = useState("0");
  const [dataList,setDataList] = useState<any>([
    {
      name:'王主任',
      code:'OPP.20221201001',
      name11:'计划中',
      name4:'2023-05-10',
      name7:'2023-05-06',
      name1:'拜访王主任，沟通合同细节'
    },
    {
      name:'李主任',
      code:'OPP.20221201002',
      name11:'拜访中',
      name7:'2023-09-27',
      name4:'2023-10-10',
      name1:'拜访李主任，沟通装机细节'
    }
  ]);
  const columns:ProColumns[] = [
    {
      title:'拜访客户',
      dataIndex: 'name',
    },
    {
      title:'商机编码',
      dataIndex: 'code',
      width:150,
    },
    {
      title:'计划状态',
      dataIndex: 'name11',
      hideInSearch:true,
    },
    {
      title:'拜访内容',
      hideInSearch:true,
      dataIndex: 'name1',
    },
    {
      title:'拜访类型',
      dataIndex: 'name2',
      hideInSearch:true,
      renderText:()=>'会议'
    },
    {
      title:'拜访方式',
      dataIndex: 'name3',
      valueType:'select',
      valueEnum:{
        '1':'线上',
        '2':'线下',
        '3':'线上线下结合',
      },
      renderText:()=>'线下'
    },
    {
      title:'拜访日期',
      hideInTable:true,
      valueType:'dateRange',
      dataIndex: 'name41',
    },
    {
      title:'拜访日期',
      hideInSearch:true,
      dataIndex: 'name4',
    },
    {
      title:'拜访时长',
      hideInSearch:true,
      dataIndex: 'name5',
      renderText:()=>'1小时'
    },
    {
      title:'创建日期',
      hideInSearch:true,
      dataIndex: 'name7',
    },
    {
      title:'创建人',
      hideInSearch:true,
      dataIndex: 'name8',
      renderText:()=>'张三'
    },
   
    {
      title: "操作",
      fixed:'right',
      valueType: 'option',
      width:160,
      render: (text, record:any,_, action) => [
        <a key="b2" onClick={()=>{}}>提醒</a>,
       <a key="b2" onClick={()=>setShowDetail(true)}>修改</a>, <a key="b3" onClick={()=>{}}>删除</a>
      ]
    }
  ]

  return (
    <PageContainer>
           <ProTable
      headerTitle=''
      pagination={{
        pageSizeOptions:['20', '100', '500']
      }}
      toolBarRender={() => [
        <Button
          type="primary"
          key="primary"
          onClick={() => {
            setShowDetail(true)
          }} >新建</Button>]
        }
     dataSource={dataList}
      scroll={{x:1200}}
      columns={columns}
      rowKey="id"
      search={{span:7}}
      toolbar={{
        settings: [],
      }}
      />
      <DrawerForm title='详情' width={1200} visible={showDetail}  onVisibleChange={v=>{setShowDetail(v)}}  drawerProps={{
          destroyOnClose:true,
          forceRender:true
        }}>
          <ProFormGroup>
            <ProFormText name="name11" width={'md'} label="拜访客户名称" rules={[{ required: true}]}/>
           
            <ProFormSelect name="name5" width={'md'} fieldProps={{onSelect:(e)=>{
              setMType(e)
            }}} label="拜访内容" options={[{label:'学术会议',value:'0'},{label:'客情',value:'1'},{label:'项目管理',value:'2'}]}/>
            {
              mType=='1'?
              <ProFormSelect name="name52" width={'md'} label="关联商机" options={[{label:'商机A',value:'0'},{label:'商机B',value:'1'}]}/>
              :
              <></>
            }
            <ProFormDatePicker name="name" width={'md'} label="拜访时间" rules={[{ required: true}]}/>
            <ProFormSelect name="name51" width={'md'} label="拜访方式" options={[{label:'线下',value:'0'},{label:'线上',value:'1'},{label:'线上线下结合',value:'1'}]}/>

            <ProFormText name="name1" width={'md'} label="拜访地点" />
            <ProFormSelect name="name511" width={'md'} rules={[{ required: true}]} label="拜访时长" options={[{label:'15分钟',value:'0'},{label:'30分钟',value:'1'},{label:'1小时',value:'2'},{label:'2小时',value:'3'},{label:'3小时',value:'4'}]}/>
            <ProFormCheckbox.Group name='target' width={'md'}  label='拜访对象' options={['临床科室','设备科','院领导','决策人']}/>
          </ProFormGroup>

          <ProFormGroup>
             <ProFormSelect name='person' label="主访人" placeholder={'请选择主访人'} width={'md'}/>
             <ProFormSelect name='person2' label="协访人" placeholder={'请选择协访人'} width={'md'}/>
          </ProFormGroup>
          <ProFormTextArea name="name11" width={'lg'} label="备注" />
      </DrawerForm>
    </PageContainer>)
}